<template>
  <div class="align-c" style="justify-content: flex-end">
    <ul class="page">
      <li>共 {{total}} 条</li>
      <li @click="pageTo(cur_page - 1)" :class="{'page-el': true, disabled: cur_page <= 1}" ><i class="fa fa-caret-left" ></i></li>
      <li v-for="item in liArray" :key="item.key" :class="{'page-el': true, active: item.key == cur_page}" @click="pageTo(item.key)">{{item.label}}</li>
      <li  @click="pageTo(cur_page + 1)" :class="{'page-el': true, disabled: cur_page >= pageCount}"><i class="fa fa-caret-right"></i></li>
    </ul>
    <div v-show="sizeShow === true" class="mgl-5">
      <el-select v-model="currentSize" style="width:100px" @change="sizeChange" size="small">
        <el-option v-for="item in sizeList" :value="item" :key="'page9' + item" :label="item + '条/页'"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyPage',
  data: function() {
    return {
      currentSize: this.sizeConf[0],
      sizeList: this.sizeConf,
      // 以上为新增
      total_size: this.total,
      page_size: this.pageSize,
      cur_page: this.curPage,
      max_item: this.maxItem
    }
  },
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 5
    },
    curPage: {
      type: Number,
      default: 1
    },
    maxItem: {
      type: Number,
      default: 9
    },
    sizeShow: {
      type: Boolean,
      default: false
    },
    sizeConf: {
      type: Array,
      default(){
        return [10,20,30,50]
      }
    }
  },
  computed: {
    pageCount: function() {
      return Math.ceil(this.total_size / this.page_size) > 0
        ? Math.ceil(this.total_size / this.page_size)
        : 1
    },
    liArray: function() {
      // 首页  尾页
      let arr = []
      let pageCount = this.pageCount
      // 总页数小于等于maxitem
      if (this.pageCount < this.max_item) {
        for (let i = 0; i < this.pageCount; i++) {
          arr.push({
            key: i + 1,
            label: i + 1 + ''
          })
        }
      } else {
        let middle = Math.ceil(this.max_item / 2)
        let floorMiddle = Math.floor(this.max_item / 2)
        // 当前页 <= Math.ceil(max_item)
        if (this.cur_page <= middle) {
          for (let i = 0; i < this.max_item - 2; i++) {
            arr.push({
              key: i + 1,
              label: i + 1 + ''
            })
          }
          arr.push({
            key: this.max_item - 1,
            label: '...'
          })
          arr.push({
            key: pageCount,
            label: pageCount + ''
          })
        } else if (
          this.cur_page > middle &&
          this.cur_page < pageCount - floorMiddle
        ) {
          // 1
          arr.push({
            key: 1,
            label: 1 + ''
          })
          // ... 5 6 7~
          arr.push({
            key: this.cur_page - floorMiddle + 1,
            label: '...'
          })
          for (
            let i = this.cur_page - floorMiddle + 2;
            i <= this.cur_page + middle - 3;
            i++
          ) {
            arr.push({
              key: i,
              label: i + ''
            })
          }
          arr.push({
            key: this.cur_page + middle - 2,
            label: '...'
          })
          arr.push({
            key: pageCount,
            label: pageCount + ''
          })
        } else {
          arr.push({
            key: 1,
            label: 1 + ''
          })
          arr.push({
            key: pageCount - this.max_item + 2,
            label: '...'
          })
          for (let i = pageCount - this.max_item + 3; i <= pageCount; i++) {
            arr.push({
              key: i,
              label: i + ''
            })
          }
        }
      }
      return arr
    }
  },
  mounted(){
    if(this.sizeShow === true){
      this.page_size = this.currentSize
      this.sizeChange(this.currentSize)
    }
  },
  methods: {
    sizeChange(e){
      this.$emit('sizeChange', e)
    },
    pageTo: function(index) {
      if (index < 1 || index > this.pageCount || index === this.cur_page) {
        return
      }
      this.cur_page = index
    }
  },
  watch: {
    curPage(val) {
      this.cur_page = val
    },
    cur_page(val) {
      this.$emit('pageChange', val)
    },
    total(val) {
      this.total_size = val
    },
    total_size(val) {
      if (this.pageCount < this.cur_page) {
        this.cur_page = this.pageCount
      }
    },
    currentSize(e){
      this.page_size = e
    }
  }
}
</script>
<style type="text/css">
ul.page {
  float: right;
  display: flex;
  align-items: center;
  color: #476760;
}
ul.page > li.page-el:not(.active):hover {
  color: #09c;
}
ul.page > li.page-el{
  height: 28px;
  width: 28px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  line-height: 25px;
  text-align: center;
  vertical-align: top;
  border: 1px solid #d1dbe5;
  border-right: 0;
}
ul.page > li.page-el:last-child{
  border-right: 1px solid #d1dbe5;
}
ul.page > li.active {
  cursor: default;
  color: #fff;
  border-color: #1ab394;
  background-color: #1ab394;
}
ul.page > li.disabled {
  cursor: not-allowed;
  color: #808080;
}
ul.page > li:first-child {
  margin-right: 6px;
}
</style>
